<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>图片检测</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Font Awesome -->
    <link rel="stylesheet" href="adminlte/plugins/fontawesome-free/css/all.min.css">
    <!-- Ionicons -->
    <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
    <!-- icheck bootstrap -->
    <link rel="stylesheet" href="adminlte/plugins/icheck-bootstrap/icheck-bootstrap.min.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="adminlte/css/adminlte.min.css">
    <!-- Google Font: Source Sans Pro -->
    <link rel="stylesheet" href="../adminlte/css/SourceSans.css">

    <style>
        .login-box, .register-box {
            width: 80%;
        }
    </style>
</head>
<body class="hold-transition login-page">
<div class="login-box">
    <div class="login-logo">
        固安捷图片检测
    </div>
    <!-- /.login-logo -->
    <div class="card">
        <div class="card-body login-card-body">

            <form method="post">
                <div class="input-group mb-3">
                    <input type="text"  name="url" class="form-control" placeholder="图片URL">
                    <div class="input-group-append">
                        <div class="input-group-text">
                            <span class="fas fa-lock"></span>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-12">
                        <button type="button" class="submit btn btn-primary btn-block">图片检测</button>
                    </div>
                    <!-- /.col -->
                </div>
            </form>
        </div>
        <!-- /.login-card-body -->
    </div>


    <div class="card card-widget">
        <!-- /.card-header -->

        <div class="row mt-4">
            <div class="col-sm-4">
                <div class="card-body" style="align-items: flex-start;      display: flex;  flex-direction: column;  ">
                    <img class="img-fluid pad result" src="" alt="无水印图片不存在"  style="height: 400px">
                </div>
            </div>
            <div class="col-sm-8">
                <div class="info-box" style="height: 90%; display: block;">

                    <div class="info-box-content" style="line-height: 250%;">
                        <span class="info-box-text" style="padding-top: calc(.375rem + 1px);">图片: <span class="src"></span></span>

                        <span class="info-box-text" style="padding-top: calc(.375rem + 1px);">检测结果: <span class="exist"></span></span>

                        <span class="info-box-text " style="padding-top: calc(.375rem + 1px);">无水印图片: <span class="dest"></span></span>

                    </div>
                    <!-- /.info-box-content -->
                </div>
            </div>
        </div>

    </div>



</div>
<!-- /.login-box -->

<!-- jQuery -->
<script src="adminlte/plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap 4 -->
<script src="adminlte/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- AdminLTE App -->
<script src="dist/js/adminlte.min.js"></script>

<script type="text/javascript" >

    $(document).ready(function (){

        $("button.submit").click(function(){

            var url = $("input[name='url']").val();

            $("input[name='url']").val('');
            
            if ( !!!url ) {
                alert("请输入固安捷图片地址");
                return
            }

            var doamin = "../";

            $("span.src").html('<a href="' + url + '" target="_blank">' + url + '</a>');

            $.ajax({
                type:"GET",
                url:"check",
                data:{"url": url},     // data参数是可选的，有多种写法，也可以直接在url参数拼接参数上去，例如这样：url:"getUser?id="+val,
                async:true,   // 异步，默认开启，也就是$.ajax后面的代码是不是跟$.ajx里面的代码一起执行
                cache:false,  // 表示浏览器是否缓存被请求页面,默认是 true
                dataType:"json",   // 返回浏览器的数据类型，指定是json格式，前端这里才可以解析json数据
                success:function(data){
                   // alert(JSON.stringify(data));

                    var img = doamin + data.url;

                    if ( data.exist ) {
                        $("span.exist").html("<span style='color: green'>存在</span>");
                        $("span.dest").html('<a href="' + img + '" target="_blank">' + img + '</a>');
                        $("img.result").attr("src",  img);
                    } else {
                        $("span.exist").html("<span style='color: indianred'>不存在</span>");
                        $("span.dest").html('<a href="' + img + '" target="_blank">' + img + '</a>');
                        $("img.result").attr("src",  img);
                    }

                },
                error:function(){
                    console.log("发生错误")
                    alert("发生错误");
                },
                complete:function(){
                    console.log("ajax请求完事，最终操作在这里完成")
                }
            });

        });






    });

</script>

</body>
</html>
